@charset "utf-8";
$fontSize:40;
@function r($p){
    @return $p/$fontSize*1rem;
}
.overflow {
    overflow: hidden;
}
.web{
    display: flex;
    flex-direction: column;
    height: 100%;
}
//头部
header{
    background: #b20000;
    width: 100%;
    height: r(89);
}
.head{
    margin: 0 r(23);
    height: r(89);
    text-align: center;
    display: flex;
    justify-content:space-between;
    align-items: center;
}
.head img{
    width: r(264);
}
.catalog i{
    color: white;
    font-size: r(26);
}
.catalog{
    position: relative;
}
.circle{
    width: r(26);
    height: r(26);
    border-radius: 50%; 
    background-color: #ff0000;
    position: absolute;
    top: r(-16);
    right: r(-16);
    color: white;
    display: table;
}
.circle>p{
    font-size: r(16);
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.search i{
    font-size: r(40);
    color: white;
    font-weight: bolder;
}
//中间部分
section{
    width: 100%;
    flex: 1;
    overflow-y: auto;
}
//加载更多
.more{
    font-size: 14px;
    color: #bbbbbb;
    margin: 15px 0;
    text-align: center;
}
//底部
footer{
    overflow: hidden;
    width: 100%;
    height: r(98);
    background: #f5f5f5;
    border-top: 1px solid #c8c6c7;
}
.foot{
    display: flex;
    margin: 0 r(32);
    height: r(100);
    justify-content:space-between;
    align-items: flex-end;
}
.foot_item{
    text-align: center;
    color: #8b8b8b;
    padding-bottom: r(5);
}
.foot_item img{
    width: r(49);
    height: r(46);
}
.foot_item p{
    font-size: 14px;
}
div[class="foot_item"]:nth-child(5)>img{
    width: r(70);
}

